<script setup lang="ts">
import useStorage from '@renderer/composables/useStorage'
import { CacheEnum } from '@renderer/enum/CacheEnum'
import dayjs from 'dayjs'

const storage = useStorage()
const userInfo: UserModel = await storage.get(CacheEnum.USER_INFO)
const companyInfo: CompanyModel = await storage.get(CacheEnum.COMPANY_INFO)
const handleRuleList = () => {
  window.api.closeWindow('ruleList', 'destroy')
  window.api.openWindow('ruleList', { title: '个人权限列表', userId: userInfo.id, isDisabled: true, userType: 'people' })
}
</script>

<template>
  <main
    class="bg-white flex flex-col justify-between rounded-md overflow-y-auto"
    style="height: -webkit-fill-available; scrollbar-width: none">
    <div class="flex flex-col gap-3">
      <div class="flex items-center">
        <div class="text-[#888888] text-base w-[120px]">头像</div>
        <img
          :src="
            userInfo?.avatar.includes('https')
              ? userInfo?.avatar
              : 'https://cw3.obs.cn-north-4.myhuaweicloud.com/default/avatar.png'
          "
          class="w-[50px] h-[50px] rounded-full" />
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">姓名</div>
        <div class="text-black">{{ userInfo.name ? userInfo.name : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">手机号</div>
        <div class="text-black">{{ userInfo.phone ? userInfo.phone : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">账号</div>
        <div class="text-black">{{ userInfo.account ? userInfo.account : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">所在公司</div>
        <div class="text-black">{{ companyInfo.name ? companyInfo.name : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">所在部门</div>
        <div class="text-black">{{ userInfo.department ? userInfo.department : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">身份</div>
        <div class="text-black">{{ userInfo.type ? userInfo.type : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">身份证号</div>
        <div class="text-black">{{ userInfo.id_card ? userInfo.id_card : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">家庭住址</div>
        <div class="text-black">{{ userInfo.address ? userInfo.address : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">紧急联系人</div>
        <div class="text-black">{{ userInfo.exigency_name ? userInfo.exigency_name : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">联系人手机号</div>
        <div class="text-black">{{ userInfo.exigency_phone ? userInfo.exigency_phone : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">微信号</div>
        <div class="text-black">{{ userInfo.wechat ? userInfo.wechat : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">支付宝</div>
        <div class="text-black">{{ userInfo.alipay ? userInfo.alipay : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">持卡银行</div>
        <div class="text-black">{{ userInfo.bank_name ? userInfo.bank_name : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">银行卡号</div>
        <div class="text-black">{{ userInfo.bank_no ? userInfo.bank_no : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">持卡人</div>
        <div class="text-black">{{ userInfo.bank_person ? userInfo.bank_person : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">支行名称</div>
        <div class="text-black">{{ userInfo.bank_sub ? userInfo.bank_sub : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">入职时间</div>
        <div class="text-black">{{ userInfo.in_time ? dayjs(userInfo.in_time).format('YYYY-MM-DD') : '无' }}</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">员工状态</div>
        <div class="text-black">在职</div>
      </div>
      <div class="flex items-center text-base">
        <div class="text-[#888888] w-[120px]">权限</div>
        <div class="text-black" @click="handleRuleList">查看</div>
      </div>
    </div>
  </main>
</template>

<style lang="scss"></style>
